<template>
  <view @click="onClick">
    <uni-badge
      :text="text"
      :offset="[2, 2]"
      absolute="rightTop"
      size="small"
      :customStyle="{ background: 'white', color: '#A5A5A5' }">
      <uni-icons
        v-show="item[collectKey]"
        :type="type === 'dianzan' ? 'hand-up-filled' : 'heart-filled'"
        :size="size"
        color="#D92121"></uni-icons>
      <uni-icons
        v-show="!item[collectKey]"
        :type="type === 'dianzan' ? 'hand-up' : 'heart'"
        :size="size"
        color="#808080"></uni-icons>
    </uni-badge>
  </view>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const props = defineProps({
  item: Object,
  type: {
    type: String,
    default: 'dianzan',
  },
  collectKey: {
    type: String,
    default: 'is_collect',
  },
  text: {
    type: Number,
  },
  size: {
    type: String,
    default: '24',
  },
});

const emit = defineEmits(['click']);

const onClick = () => emit('click');
</script>

<style lang="scss" scoped>
.select {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin-right: 15rpx;
}
.dianzan {
  background-image: url('./images/dianzan.png');
  &.active {
    background-image: url('./images/dianzan_a.png');
  }
}
.collect {
  background-image: url('./images/collect.png');
  &.active {
    background-image: url('./images/collect_a.png');
  }
}
</style>
